<script setup>
import { ref,watch } from 'vue';
import { useRouter ,useRoute} from "vue-router"
import order from './components/order.vue'
import coupons from './components/coupons.vue'
import balance from './components/balance.vue'
import collection from './components/collection.vue'
import addressView from './components/address.vue'
import account from './components/account.vue'
const router = useRouter()
const route = useRoute();
const activeName = ref(route.query.tab || 'order');

// 跳转页面
const jumpTo = (path) => {
    router.push(path)
}

const handleClick= ()=>{
    jumpTo('/person?tab='+activeName.value)
}
watch(
  () => route.query,
  async (newQuery, oldQuery) => {
    activeName.value = ref(route.query.tab || 'order');
  },
  { deep: true, immediate: true }
);
</script>

<template>
    <div class="centerMiddle">
        <div class="top">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                <el-tab-pane :label="$t('account.tab1')" name="order" >
                    <order></order>
                </el-tab-pane>
                <el-tab-pane :label="$t('account.tab2')" name="coupons">
                    <coupons></coupons>
                </el-tab-pane>
                <el-tab-pane :label="$t('account.tab3')" name="balance">
                    <balance></balance>
                </el-tab-pane>
                <el-tab-pane :label="$t('account.tab4')" name="collection">
                    <collection></collection>
                </el-tab-pane>
                <el-tab-pane :label="$t('account.tab5')" name="addressView">
                    <addressView></addressView>
                </el-tab-pane>
                <el-tab-pane :label="$t('account.tab6')" name="account">
                    <account></account>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.centerMiddle{
    width: 900px;
    margin: 30px auto;
    min-height: calc(100vh - 549px);
}

::v-deep .el-tabs__nav{
    margin-left: 150px !important;
}
::v-deep .el-tabs__content{
    overflow: unset;
}
</style>
